<template>
	<view class="message-page">
		<view class="message-list">
			<view class="message-item" v-for="(item, index) in messageList" :key="item.id" @click="toDetail(item)">
				<view class="avatar">
					<image :src="item.userVo.avatarUrl" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="username">{{ item.userVo.nickname }}</view>
					<view v-if="item.type == 'likePost'" class="text"> <u-icon name="thumb-up-fill" size="24" :color="themeColor"></u-icon></view>
					<view v-else class="text">{{ item.content ? item.content : ' ' }}</view>
					<view class="time">{{ item.createTime }}</view>
				</view>
				<view class="image">
					<image v-if="item.hasImage" :src="item.url" />
					<view class="no-image">{{ item.url }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';
import { timeCalc } from '@/api/utils.js';

export default {
	data() {
		return {
			messageList: []
		};
	},
	mounted() {
		this.getMessages();
	},
	methods: {
		async getMessages() {
			const res = await request('/message/get');
			this.messageList = res.data.map((item) => {
				item.hasImage = item.url.substring(0, 4) === 'http' ? true : false;
				item.createTime = timeCalc(item.createTime);
				return item;
			});
		},
		toDetail(item) {
			if (item.type == 'likePost') {
				uni.navigateTo({
					url: `/pages/Forum/PostPage?id=${item.sourceId}`
				});
			} else if (item.type == 'postComment') {
				uni.navigateTo({
					url: `/pages/Forum/PostPage?id=${item.sourceId}`
				});
			} else if (item.type == 'postComment') {
			    uni.navigateTo({
					url: `/pages/Forum/PostPage?id=${item.sourceId}`
				});
			}
		}
	}
};
</script>

<style lang="scss">
.message-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.message-list {
	.message-item {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #f5f5f5;

		&:active {
			background-color: #f5f5f5;
		}

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 25rpx;
			overflow: hidden;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 420rpx;

			.username {
				font-size: 32rpx;
				font-weight: bold;
				color: $theme-color;
			}

			.text {
				width: 100%;
				font-size: 28rpx;
				color: #333;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.time {
				font-size: 24rpx;
				color: #999;
				margin-top: 5px;
			}
		}

		.image {
			width: 140rpx;
			height: 140rpx;
			margin-left: auto;
			margin-right: 20rpx;
			// border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.no-image {
				display: -webkit-box;
				font-size: 22rpx;
				color: #666;
				background-color: #eee;
				text-align: justify;
			}
		}
	}
}
</style>
